<template>
  <div class="activity">
    <Aside></Aside>
    <Header :title="title" @toggleMenu="toggleMenu" @navToBack="navToBack"></Header>
    <div class="activityTab">
      <span  v-for="(item,index) in activeTab" :class="{'active':index==defaultIndex}" @click.stop="choiseTab(index)"> {{item}}</span>
    </div>
    <div class="activityContent">
      <div class="activityItem ">
        <router-link :to="{path:'/activeDetail',query:{id:item.id,url:item.url,hasOver:item.is_past,hasPost:item.is_apply}}" tag="div" v-for="(item,index) in activeData" :key="index">
          <a  class="onlineItem" >
            <div class="onlineExamLeft">
              <p class="onlineTitle">
                {{item.name}}
              </p>
              <p class="onlineDate">{{item.apply_etime}}  报名截止</p>
            </div>
            <div class="onlineExamRight">
              <p class="onlineBtn " :class="{'hasOver':item.is_past==1}">
               {{ activeDetail[item.is_past]}}
              </p>
              <p class="onlineJoin">{{item.applied}}人参加</p>
            </div>
          </a>
        </router-link>
      </div>
    </div>
    <Loading v-if="showLoading"></Loading>
    <div class="noData" v-if="noData">
      <img src="https://api.cloudcpc.com/static/index/images/noData.png" alt="">
    </div>
  </div>
</template>
<script >
  import aside from '../../components/aside.vue'
  import header from '../../components/header.vue'
  import Loading from '../../components/loading.vue'
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        title:'活动报名',
        UID:'',
        activeData:[],
        activeTab:['未报名','已报名','所有活动'],
        defaultIndex:0,
        showLoading:false,
        noData:false,
        activeDetail:[
            '未结束',
            '已结束'
        ]
      }
    },
    computed:{
      ...mapState({
        uid:state =>state.app.loginState.uid
      })
    },

    components:{
      Aside:aside,
      Header:header,
      Loading:Loading
    },
    methods:{
      choiseTab(index){
         this.defaultIndex =index
          this.noData =false
          this.getData(index+1)
      },
      navToBack(){
        this.$router.go(-1);//返回上一层
      },
      toggleMenu(){
        $('.aside').toggleClass('active')
        $('body').toggleClass('active')
        if($('.aside').hasClass('active')){
          $('#toggleBtn').find('.img2').hide()
          $('#toggleBtn').find('.img1').show()
        }else{
          $('#toggleBtn').find('.img1').hide()
          $('#toggleBtn').find('.img2').show()
        }
      },
      getData(id=1){
        this.activeData =[]
        this.showLoading =true
          this.axios.get('/home/Activity/getAct?'+`${this.baseUrl}`,{
              params:{
                  uid:this.uid||localStorage.getItem('uid'),
                  type:id
              }
          })
            .then((res)=>{
            if(res.data.code==1){
                  this.showLoading =false
                if(res.data.data.length==0){
                   this.noData =true
                   return false
                }
              this.activeData.push(...res.data.data)
            }
//              console.log(this.activeData)
            })
            .catch((res)=>{
                console.log(res.error)
            })
      }
    },
    mounted (){
        this.getData()
      $('.activityTab span').click(function () {
        var index =$(this).index()
        for(var i=0;i< $('.activityTab span').length;i++){
          $('.activityTab span').eq(i).removeClass('active')
          $('.activityItem').eq(i).removeClass('active')
        }
        $(this).addClass('active')
        $('.activityItem').eq(index).addClass('active')
      })
    }
  })
</script>
<style scoped>
  .activity{
    margin-top: 0.8rem;
    background: #f9f5f5;
  }
  .activityDetail{
    margin-top: 0.8rem;
  }
  .activity .activityTab{
    height: 0.88rem;
    background: white;
    font-size:0;
  }
  .activity .activityTab span{
    display: inline-block;
    width: 33.3%;
    text-align: center;
    line-height: 0.88rem;
    color: #999;
    font-size: 0.32rem;
  }
  .activity .activityTab span.active{
    color: #e32b2c;
    border-bottom: 0.02rem solid #e32b2c;
  }
  .activityContent{
    margin-top: 0.1rem;
    background: #ffffff;
  }

  .onlineItem{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 0.25rem 0.32rem 0.3rem 0.32rem;
    border-bottom: 1px solid #f9f5f5;
  }
  .onlineItem .onlineExamLeft{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .onlineItem .onlineExamLeft .onlineTitle{
    font-size: 0.32rem;
    color: #333333;
    font-weight: bold;
    padding-bottom: 0.15rem;
    margin-right: 0.15rem;
  }
  .onlineItem .onlineExamLeft .onlineDate{
    color: #666666;
    font-size: 0.26rem;
  }

  .onlineItem .onlineExamRight{
    width: 1.4rem;
  }
  .onlineItem .onlineExamRight  .onlineBtn{
    width: 100%;
    text-align: center;
    height: 0.48rem;
    line-height: 0.48rem;
    font-size: 0.26rem;
    color: #ffffff;
    border-radius: 0.07rem;
    -webkit-border-radius: 0.07rem;
    background: #e32b2c;
    margin-bottom: 0.1rem;
  }

  .onlineItem .onlineExamRight .onlineJoin{
    color: #999999;
    font-size: 0.2rem;
    text-align: center;
  }
  .onlineItem .onlineExamRight .hasBeenSend{
    background: #facc2b;
  }
  .onlineItem .onlineExamRight .hasOver{
    background: #999;
  }
  .activityItem{
  }
  .activityItem.active{
    display: block;
  }

  .activityDetail{
    padding: 0 0.32rem;
  }
  .detailTitle{
    font-size: 0.32rem;
    color: #333333;
    text-align: center;
    padding-top: 0.4rem;
    padding-bottom: 0.1rem;
  }
  .detailDate{
    text-align: center;
    font-size: 0.26rem;
    color: #999999;

  }
  .detailContent p{
    text-indent: 2em;
    color: #333;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    margin-top: 12px;
  }

  .detailContent .img{
    text-align: center;
    max-width: 100%;
    text-indent: 0;

  }
  .activityZone{
    margin: 0.34rem;
    border: 1px solid #e83329;
    border-radius: 0.15rem;
    padding: 0.3rem 0 0.3rem 0.4rem;
  }
  .activityZone p{
    font-size: 0.26rem;
    color: #333;
    line-height: 1.8;
  }
  .sendBtn{
    text-align: center;
    margin-top: 0.5rem;

    margin-bottom: 0.9rem;
  }
  .sendBtn span {
    display: inline-block;
    font-size: 0.32rem;
    color: white;
    width: 4.5rem;
    height: 0.7rem;
    text-align: center;
    line-height: 0.7rem;
    background: #999999;
    border-radius: 0.32rem;
    -webkit-border-radius: 0.32rem;
    margin-top: 0.7rem;
  }
  .noData{
    text-align: center;
    width: 100%;
    height: 100%;
  }
  .noData img{
    position: absolute;
    left: 0;
    top:0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
</style>
